<template>
    <div>
      <div class="sub-name name-box" id="low-name"><span>领导团队</span></div>

      <div>
        <ul class="personal-list" >
          <li v-for="item in teamList">
            <div class="personal-photo" :style="{backgroundImage:'url('+item.img+')'}"></div>
            <div class="personal-info">
              <p class="personal-name">{{item.title}}<span class="personal-post">{{item.title1}}</span></p>
              <div class="personal-desc" v-html="item.content">

              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>
</template>

<script>
  export default {
    name: 'team',
    async asyncData({$axios}){
      const teamList = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_ldtd');
      console.log(teamList)
      return {teamList}
    }
  }
</script>

<style >
  .personal-list{
    width: 100%;

  }
  .personal-list li{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #dededc;
    padding:0.2rem 0;
  }
  .personal-photo{
    width: 23%;
    height:2.3rem;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .personal-info{
    width: 73.5%;
  }
  .content .personal-name{
    margin: 0;
    font-size: 0.22rem;
  }
  .personal-post{
    margin-left: 20px;
  }
  .personal-desc{
    margin-top: 0.2rem;
  }
  .personal-desc p{
    margin: 0;
    line-height: 0.28rem;
  }
</style>
